body {
    height: 100%;
    display: flex;
    background-color: #f5f6f7;
    font-size: 14px;
    flex-direction: column;
    #app {
        display: flex;
        flex-direction: column;
        margin-bottom: 32px;
        .container {
            position: relative;
            width: auto;
            min-width: 896px;
            min-height: 640px;
            background: transparent;
            margin: 10px auto 0;
            .container-right {
                min-width: 1000px;
                margin-left: 200px;
                min-height: 559px;
                .container-profile {
                    min-width: 1000px;
                    -ms-flex-line-pack: justify;
                    align-content: space-between;
                    .profile-header {
                        .general-info {
                            margin-bottom: 10px;
                            background: #fff;
                            .general-info-t {
                                padding: 24px 0 40px 24px;
                                position: relative;
                                display: flex;
                                // box-shadow: 0 1px 8px 0 rgb(0, 0, 0, 0.04);
                                .general-info-avatar {
                                    -ms-flex-negative: 0;
                                    flex-shrink: 0;
                                    position: relative;
                                    width: 96px;
                                    height: 96px;
                                    margin-right: 16px;
                                    // box-shadow: 0 0 10px 2px rgb(0 ,0, 0.06);
                                    border: 2px solid #fff;
                                    border-radius: 50%;
                                    cursor: pointer;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        display: block;
                                        border-radius: 50%;
                                    }
                                    .avatar-hover {
                                        display: none;
                                        position: absolute;
                                        left: 0;
                                        top: 0;
                                        width: 100%;
                                        height: 100%;
                                        background: rgba(0, 0, 0, 0.5);
                                        justify-content: center;
                                        align-items: center;
                                        border-radius: 50%;
                                        img {
                                            width: 32px;
                                            height: 32px;
                                        }
                                    }
                                    &:hover {
                                        .avatar-hover {
                                            display: -webkit-box;
                                            display: -ms-flexbox;
                                            display: flex;
                                        }
                                    }
                                }
                                .general-info-t-info {
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    .profile-name-info {
                                        margin-bottom: 16px;
                                        display: flex;
                                        align-items: center;
                                        .person-name {
                                            color: #222226;
                                            font-weight: 500;
                                            line-height: 24px;
                                            font-size: 20px;
                                            margin-right: 16px;
                                        }
                                        .person-code-age {
                                            height: 16px;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            border-radius: 8px;
                                            img {
                                                width: 22px;
                                                height: 22px;
                                                display: block;
                                            }
                                            span {
                                                padding: 0 6px 0 4px;
                                                font-size: 12px;
                                                display: block;
                                                height: 16px;
                                                line-height: 16px;
                                                text-align: center;
                                            }
                                        }
                                    }
                                    .profile-vip-info {
                                        display: flex;
                                        align-items: center;
                                        height: 32px;
                                        border-radius: 4px;
                                        padding: 0 8px;
                                        font-size: 14px;
                                        .vip-icon {
                                            background-image: url(../image/会员.png);
                                        }
                                        .vip-icon {
                                            background-image: url(../image/会员.png) no-repeat 50%;
                                            display: inline-block;
                                            margin-right: 2px;
                                            width: 22px;
                                            height: 22px;
                                            background-size: cover;
                                        }
                                        .no-vip-info {
                                            color: #999aaa;
                                            margin-right: 88px;
                                        }
                                    }
                                }
                            }
                        }
                        .base-info {
                            background: #fff;
                            margin-bottom: 10px;
                            .base-info-head {
                                height: 48px;
                                line-height: 48px;
                                font-size: 18px;
                                font-weight: 600;
                                color: #2e2e2e;
                                padding-left: 16px;
                                border-bottom: 1px solid #f0f0f2;
                            }
                            .base-info-content {
                                padding: 16px;
                                .base-info-content-show {
                                    padding: 16px 58px 16px 0;
                                    position: relative;
                                    ul {
                                        li {
                                            line-height: 24px;
                                            font-size: 14px;
                                            margin-bottom: 32px;
                                            display: flex;
                                            align-items: baseline;
                                            .content-show-l {
                                                width: 56px;
                                                color: #555666;
                                                margin-right: 40px;
                                                flex-shrink: 0;
                                                padding-left: 16px;
                                                display: flex;
                                                box-sizing: content-box;
                                                justify-content: space-between;
                                            }
                                            .content-show-r {
                                                color: #222226;
                                                word-break: break-all;
                                            }
                                            .edit-icon {
                                                display: none;
                                                margin-left: 24px;
                                                cursor: pointer;
                                                align-items: baseline;
                                                color: #1989fa;
                                                font-size: 14px;
                                                min-width: 50px;
                                                i {
                                                    display: inline-block;
                                                    margin-right: 2px;
                                                    width: 16px;
                                                    height: 16px;
                                                    background: url()
                                                        no-repeat 50%;
                                                    background-size: 16px 16px;
                                                    position: relative;
                                                    top: 3px;
                                                    left: 0;
                                                }
                                            }
                                            &:hover {
                                                .edit-icon {
                                                    display: -webkit-box;
                                                    display: -ms-flexbox;
                                                    display: flex;
                                                }
                                            }
                                        }
                                    }
                                    .td {
                                       height: 32px;
                                       line-height: 32px;
                                       padding: 0px 12px;
                                       border-radius: 16px;
                                       border: red 1px solid;
                                       margin-left: 16px;
                                       color: red;
                                       background-color: transparent;
                                       cursor: pointer;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    #copyright-box {
        width: 100%;
        background: #fff;
        .column {
            margin: 0 auto;
            width: 100%;
            min-width: 972px;
            box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05);
            background: #fff;
            padding: 24px 34px 20px;
            box-sizing: border-box;
            .footer-column-t {
                display: flex;
                justify-content: center;
                li {
                    margin: 0 8px;
                    color: #999aaa;
                    font-size: 14px;
                    height: 16px;
                    line-height: 16px;
                    display: flex;
                    align-items: center;
                    img {
                        width: 16px;
                        height: 16px;
                        display: block;
                        margin-right: 4px;
                    }
                }
            }
            .footer-column-b {
                margin-top: 8px;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                li {
                    font-size: 12px;
                    color: #999aaa;
                    height: 16px;
                    line-height: 16px;
                    margin: 4px 6px;
                    display: flex;
                    align-items: center;
                    img {
                        width: 14px;
                        height: 14px;
                        display: block;
                        margin-right: 4px;
                    }
                }
            }
            #csdn-copyright-footer {
                box-sizing: border-box;
                a {
                    text-decoration: none;
                    color: inherit;
                }
            }
        }
    }
}
.fixed {
   overflow-y: scroll;
   z-index: 20;
   position: fixed;
   display: flex;
   align-items: center;
   flex-direction: column;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.2);
   .z {
      flex: 1;
   }
   & > div {
      flex-shrink: 0;
      border-radius: 6px;
      margin: auto;
   }
   .c {
      border-radius: 4px;
      box-sizing: border-box;
      padding: 2px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #ccc;
      cursor: pointer;
      &:hover {
         background-color: rgba(0, 0, 0, 0.05);
      }
   }
   .box {
      background: #fff;
      width: 600px;
      height: 400px;
      min-height: 400px;
      padding: 0 26px;
      box-sizing: border-box;
      color: #303133;
      display: flex;
      flex-direction: column;
      form {
         text-align: center;
      }
      input[type="text"] {
         height: 32px;
         line-height: 32px;
         font-size: 18px;
         border: #ccc 1px solid;
         border-radius: 4px;
         padding: 0 8px;
         color: inherit;
      }
      input[type="text"]:focus {
         border-color: #0c93e4 !important;
      }
      input.error {
         border-color: #fc1944 !important;
      }
      .top {
         display: flex;
         padding-top: 26px;
         height: 36px;
         border-bottom: #e4e7ed 2px solid;
         .g {
            flex: 1;
         }
         li {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 36PX;
         }
         .list-button {
            height: 36px;
            cursor: pointer;
            padding: 0 18px;
         }
         .active {
            color: #fc5531;
            border-bottom: #fc5531 2px solid;
         }
      }
      .bom {
         display: flex;
         flex: 1;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         li {
            display: none;
            div {
               margin-bottom: 20px;
               text-align: center;
            }
         }
         button:hover {
            background-color: #fc1944 !important;
         }
         button {
            height: 32px;
            line-height: 32px;
            border-radius: 16px;
            box-sizing: border-box;
            background: #fc5531;
            position: relative;
            padding: 0 22px;
            color: #fff;
            margin-left: 6px;
         }
      }
      &.upimg {
         font-size: 14px;
         ul {
            display: flex;
         }
         .up {
            .updata {
               form {
                  text-align: center;
               }
               .file_s {
                  height: 36px;
                  line-height: 36px;
                  position: relative;
                  border-radius: 18px;
                  input {
                     width: 100%;
                     height: 100%;
                     opacity: 0;
                     position: absolute;
                     top: 0;
                     left: 0;
                  }
               }
            }
         }
      }
   }
}
.dis {
   display: block !important;
}
